<script setup>
import { computed, ref } from 'vue'
const props = defineProps({
	list: {
		type: Array,
		required: true
	},
	is_card: {
		type: Boolean,
		default: true
	},
	height: {
		type: Number,
		default: 150
	}
})

// 当前显示的图片的序号
const currentNum = ref(null)

// 切换图片时触发函数
const onSwitchImage = (e) => {
	if (props.is_card) {
		return
	} else {
		currentNum.value = e.current
	}
}

const swiperList = computed(() => {
	return props.list.map((item) => item.url)
})

// 点击图片时触发预览图片函数
const onClickImage = (e) => {
	if (props.is_card) {
		return
	} else {
		uni.previewImage({
			loop: true,
			urls: swiperList.value,
			current: e
		})
	}
}
</script>

<template>
	<view>
		<up-swiper
			:list="swiperList"
			:height="height"
			:previousMargin="is_card ? 30 : 0"
			:nextMargin="is_card ? 30 : 0"
			circular
			:radius="is_card ? 5 : 0"
			bgColor="#ffffff"
			:displayMultipleItems="0"
			@change="onSwitchImage"
			@click.native.stop="onClickImage"
			:indicatorStyle="is_card === true ? '' : 'right: 20px'"
		>
			<template #indicator v-if="!is_card">
				<view class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
				</view>
			</template>
		</up-swiper>
	</view>
</template>

<style lang="scss" scoped>
.indicator {
	@include flex(row);
	justify-content: center;

	&__dot {
		height: 6px;
		width: 6px;
		border-radius: 100px;
		background-color: rgba(255, 255, 255, 0.35);
		margin: 0 5px;
		transition: background-color 0.3s;

		&--active {
			background-color: #ffffff;
		}
	}
}

.indicator-num {
	padding: 2px 0;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 100px;
	width: 35px;
	@include flex;
	justify-content: center;

	&__text {
		color: #ffffff;
		font-size: 12px;
	}
}
</style>
